<template>
  <div class="login-container">
    <div class="form-area">
      <ul class="title">
        <li class="btn">欢迎加入猩猩影视</li>
      </ul>
      <login-form
        ref="registerRef"
        :config="registerConfig"
        :form="registerForm"
        :rules="registerRule"
        :needVerifyCode="true"
        @getClientId="getClientId"
      ></login-form>
      <div
        class="ope-btn register-btn"
        style="margin-top: 42px;"
        @click="submit"
      >
        注 册
      </div>
    </div>
  </div>
</template>
<script>
import LoginForm from '../../../components/login-form/login-form.vue'
export default {
  components: {
    LoginForm
  },
  computed: {
    version () {
      return this.$store.state.version
    }
  },
  methods: {
    setVideoSize () {
      const width = document.documentElement.clientWidth
      const height = document.documentElement.clientHeight
      this.width = width
      this.height = height
    },
    getClientId (obj) {
      this.clientId = obj.clientId
    },
    submit () {
      const that = this
      this.$refs.registerRef.validate(data => {
        if (!data.nickname) {
          that.$message.error('请输入您的昵称')
          return
        }
        if (!data.username) {
          that.$message.error('请输入您的账号')
          return
        }
        if (!data.password) {
          that.$message.error('请输入您的密码')
          return
        }
        if (!data.rePassword) {
          that.$message.error('请重复输入您的密码')
          return
        }
        if (!data.verifyCode) {
          that.$message.error('请输入您的验证码')
          return
        }
        if (data.password !== data.rePassword) {
          that.$message.error('两次输入的密码不一致，请重新再试')
          return
        }
        this.$store
          .dispatch('REGISTER_USER', {
            password: data.password,
            username: data.username,
            nickname: data.nickname,
            captcha: {
              code: data.verifyCode,
              clientId: this.clientId
            }
          })
          .then((res) => {
            if (res.code === 100) {
              that.$router.replace({
                path: '/user/login'
              })
            } else {
              this.$message.error(res.desc)
            }
          }).catch((err) => {
            console.log(err.message)
          })
      })
    }
  },
  data: () => {
    return {
      width: 0,
      height: 0,
      form: {},
      registerForm: {
        nickname: '',
        username: '',
        password: '',
        rePassword: ''
      },
      registerConfig: [
        {
          key: 'nickname',
          label: '昵称',
          placeholder: '您的昵称',
          icon: 'iconfont icon-user'
        },
        {
          key: 'username',
          label: '账号',
          placeholder: '您的账号',
          icon: 'iconfont icon-account'
        },
        {
          key: 'password',
          label: '密码',
          placeholder: '您的密码',
          icon: 'iconfont icon-password',
          type: 'password'
        },
        {
          key: 'rePassword',
          label: '重复密码',
          placeholder: '重新输入密码',
          icon: 'iconfont icon-password',
          type: 'password'
        }
      ],
      registerRule: {
        nickname: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
        username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        rePassword: [{ required: true, message: '请重新输入密码', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.setVideoSize()
  }
}
</script>
<style scoped>
@import url(../../../global.css);
input {
  background: none;
  outline: none;
  border: none;
}
input:focus {
  border: none;
}
.login-container {
  position: fixed;
  z-index: 10;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url('https://s.image.vcinema.com.cn/doras_web/imgs/background.jpg?x-oss-process=image/resize,p_80');
  background-size: cover;
}
.form-area {
  position: absolute;
  width: 400px;
  height: 430px;
  background: #222;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  top: 50%;
  left: 50%;
  margin-left: -250px;
  margin-top: -265px;
  padding: 50px;
}
.form-area .title {
  text-align: center;
  font-size: 18px;
  color:#fff;
  font-size: 28px;
}
.ope-btn {
  width: 300px;
  margin: 50px auto 0;
  padding: 9px 0;
  font-size: 16px;
  border-radius: 4px;
  background: #333;
  text-align: center;
  color: #9f9f9f;
  cursor: pointer;
}
video {
  object-fit: cover;
}
</style>
